/*
 * 3D测肤的canvas画图部分
 * @Author: ljb
 * @Date: 2018-06-11 16:24:48
 * @Last Modified by: ljb
 * @Last Modified time: 2018-09-28 15:20:40
 */
<style lang="less" rel="stylesheet/less" type="text/less">

    .wax-stage {
        position: relative;
        width: 509px;
        height: 291px;
        img {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
        }
    }

</style>
<template>
	<div class="wax-stage">
		<img
			:src="canvas_url"
			alt="">
	</div>
</template>

<script>
export default {
	name: 'ImageCanvas',
	props: {
		problems: {
			type: Array,
			default() {
				return [];
			},
		},
		sex: {
			type: Number,
			default() {
				return 2;
			},
		},
	},
	data() {
		return {
			item_map: {
				3: 'oil-canvas',
				4: 'blackhead-canvas',
				2: 'hydrate-canvas',
				1: 'red_blood_silk-canvas',
				5: 'pigmentation-canvas',
			},
			canvas_url: '',	// canvas转换之后的img地址
			ctx: null,		// canvas的getContext('2d')
			canvas: null,	// 存储canvas对象
			canvas_bg: null,	// 缓存加载进来的背景图
			image_male_background: require('src/assets/img/shuju_nanxing_wax@2x.png'),
			image_female_background: require('src/assets/img/shuju_nvxing_wax@2x.png'),
		};
	},
	computed: {
		showBgImg() {
			const current_sex = this.sex;
			switch (current_sex) {
			case 1:

				return this.image_male_background;

			default:
				return this.image_female_background;
			}
		},
	},
	watch: {
		problems() {
			if (this.problems.length === 0) return;

			this.rePaint();
		},
	},
	mounted() {
		this.initCanvas();
	},
	methods: {
		/**
         * 初始化canvas画图
         * @return {undefined}
         */
		initCanvas() {
			const stage = document.getElementsByClassName('wax-stage')[0];
			const canvas = document.createElement('canvas');

			const bg_image = new Image();

			bg_image.src = this.showBgImg;

			const stage_width = stage.offsetWidth;
			const stage_height = stage.offsetHeight;

			bg_image.width = stage_width;
			bg_image.height = stage_height;

			canvas.width = stage_width;
			canvas.height = stage_height;

			this.canvas = canvas;

			this.ctx = canvas.getContext('2d');

			bg_image.onload = () => {
				this.canvas_bg = bg_image;
				this.ctx.drawImage(bg_image, 0, 0, bg_image.width, bg_image.height);
				this.problems.forEach((problem) => {
					this.startDraw(problem);
				});
				this.canvas_url = this.canvas.toDataURL('image/png');
			};
		},

		/**
		 * 重绘
		 * @return {undefined}
		 */
		rePaint() {
			if (!this.canvas_bg) return;
			this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);

			const bg_image = this.canvas_bg;

			this.ctx.drawImage(bg_image, 0, 0, bg_image.width, bg_image.height);

			this.problems.forEach((problem) => {
				this.startDraw(problem);
			});

			this.canvas_url = this.canvas.toDataURL('image/png');
		},

		/**
         * 开始画图
         * @param  {Object} ctx    {canvas的ctx}
         * @param  {String} itemId {测肤类型的id}
         * @return {undefined}
         */
		startDraw(problem) {
			let coordinates_1 = [];	// 女性或其他的画线所需的坐标数组
			let coordinates_2 = [];	// 男性的画线所需的坐标数组

			let x_y_coordinates_1 = [0, 0];	// 女性或其他的画矩形的起始x坐标,y坐标
			let x_y_coordinates_2 = [0, 0];	// 男性的画矩形的起始x坐标,y坐标

			switch (Number(problem.itemsid)) {
			case 3:
				coordinates_1 = [
					[350, 63],
					[240, 63],
				];
				coordinates_2 = [
					[350, 63],
					[234, 63],
				];

				x_y_coordinates_1 = [350, 45];
				x_y_coordinates_2 = [350, 45];
				break;

			case 4:
				coordinates_1 = [
					[350, 106],
					[207, 106],
				];
				coordinates_2 = [
					[350, 106],
					[210, 106],
				];

				x_y_coordinates_1 = [350, 88];
				x_y_coordinates_2 = [350, 88];

				break;

			case 2:
				coordinates_1 = [
					[144, 63],
					[225, 63],
				];
				coordinates_2 = [
					[144, 63],
					[220, 63],
				];

				x_y_coordinates_1 = [0, 45];
				x_y_coordinates_2 = [0, 45];

				break;
			case 1:
				coordinates_1 = [
					[144, 113],
					[190, 113],
				];
				coordinates_2 = [
					[144, 108],
					[190, 108],
				];

				x_y_coordinates_1 = [0, 95];
				x_y_coordinates_2 = [0, 90];

				break;

			default:
				coordinates_1 = [
					[350, 158],
					[245, 158],
					[245, 130],
				];
				coordinates_2 = [
					[350, 158],
					[245, 158],
					[245, 130],
				];

				x_y_coordinates_1 = [350, 140];
				x_y_coordinates_2 = [350, 140];
				break;
			}

			const coordinates = this.defaultOrOther(coordinates_1, coordinates_2);
			const x_y_coordinates = this.defaultOrOther(x_y_coordinates_1, x_y_coordinates_2);

			const [x, y] = x_y_coordinates;

			this.roundedRect(x, y, 144, 36, 10, problem.problem, coordinates);
		},

		/**
		 * 根据sex判断显示默认或者其他值
		 * @param  {Any} default_arr {默认的值}
		 * @param  {Any} other_arr   {其他值}
		 * @return {Any} {返回的值}}
		 */
		defaultOrOther(default_arr, other_arr) {
			switch (this.sex) {
			case 1:

				return other_arr;

			default:
				return default_arr;
			}
		},

		/**
         * 公有的画圆角矩形方法
         * @param  {Object} ctx    {canvas的ctx}
         * @param  {Number} x      {开始的x坐标}
         * @param  {Number} y      {开始的y坐标}
         * @param  {Number} width  {矩形宽度}
         * @param  {Number} height {矩形高度}
         * @param  {Number} radius {圆角值}
         * @param  {String} text   {矩形内文字}
         * @param  {Number} length {直线的长度}
         */
		roundedRect(x, y, width, height, radius, text, coordinates) {
			if (!coordinates || coordinates.length < 2) throw new Error('At least two coordinate points');

			this.ctx.beginPath();
			this.ctx.moveTo(x, y + radius);
			this.ctx.lineTo(x, (y + height) - radius);
			this.ctx.quadraticCurveTo(x, y + height, x + radius, y + height);
			this.ctx.lineTo((x + width) - radius, y + height);
			this.ctx.quadraticCurveTo(x + width, y + height, x + width, (y + height) - radius);
			this.ctx.lineTo(x + width, y + radius);
			this.ctx.quadraticCurveTo(x + width, y, (x + width) - radius, y);
			this.ctx.lineTo(x + radius, y);
			this.ctx.quadraticCurveTo(x, y, x, y + radius);
			this.ctx.fillStyle = '#ccc';
			this.ctx.fill();
			this.ctx.closePath();

			// 写字
			this.ctx.fillStyle = '#fff';
			this.ctx.font = '14px sans-serif';
			this.ctx.textAlign = 'center';
			this.ctx.textBaseline = 'middle';
			this.ctx.fillText(text, x + (width / 2), y + (height / 2));

			// 画直线
			this.drawLine(coordinates);
		},

		/**
		 * 画线条
		 * @param  {Array} coordinates  {画线条需要的坐标点数组}
		 */
		drawLine(coordinates) {
			this.ctx.beginPath();
			this.ctx.lineJoin = 'round';
			this.ctx.lineWidth = 2;// 线条的宽度
			this.ctx.strokeStyle = '#ccccff';// 线条的颜色

			coordinates.forEach((coordinate, index) => {
				const [x, y] = coordinate;
				if (index === 0) {
					this.ctx.moveTo(x, y);
				} else {
					this.ctx.lineTo(x, y);
				}
			});

			this.ctx.stroke();

			const [ex, ey] = coordinates[coordinates.length - 1];

			this.drawCircle(ex, ey, 5);
		},

		/**
		 * 画圆
		 * @param  {Object} ctx {canvas的ctx}
		 * @param  {Number} x   {圆心x坐标}
		 * @param  {Number} y   {圆心y坐标}
		 * @param  {Number} r   {圆心半径}
		 */
		drawCircle(x, y, r) {
			// 画背景白色圆
			this.ctx.beginPath();
			this.ctx.arc(x, y, r + 1, 0, 2 * Math.PI);
			this.ctx.fillStyle = '#fff';
			this.ctx.fill();
			this.ctx.closePath();

			// 画有颜色的实心圆
			this.ctx.beginPath();
			this.ctx.arc(x, y, r, 0, 2 * Math.PI);
			this.ctx.fillStyle = '#ccccff';
			this.ctx.fill();
			this.ctx.closePath();
		},

	},
};
</script>
